<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>入院登记</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" th:href="@{/element-ui/lib/theme-chalk/index.css}">
  <style>
    [v-cloak] {
      display: none;
    }
    body {
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 450px;
      margin: auto;
    }

    h1 {
      text-align: center;
      color: #333;
      font-size: 30px;
      margin-bottom: 20px;
    }

    .hospital-element {
      margin-top: 25%;
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .hospital-element2 {
      background-color: rgba(181, 229, 181, 0.53);
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }

    .element-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .element-description {
      color: #666;
      margin-bottom: 20px;
    }
    .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  </style>
</head>

<body>
  <div id="app" v-cloak>



    <div v-cloak>
      <div class="container" style="margin-top: 6%">
      <i class="el-icon-back" @click="goHome"  style="position: absolute; top: 20px;left: 20px;font-size: 24px">返回</i>
      <el-container style="background-color: whitesmoke">
        <el-header style="font-size: 35px;background-color: whitesmoke">医院登记管理系统</el-header>
        <!-- <el-main>Main</el-main> -->
        <el-footer style="background-color: whitesmoke">入院登记</el-footer>
      </el-container>

      <el-form ref="form" :model="form" label-width="80px"  style="margin-top: 3%;">
        <el-form-item label="身份证号">
          <el-input v-model="form.CEERTNO" maxlength="18"  @blur="checkIdNumber"></el-input>
        </el-form-item>
        <el-form-item label="患者姓名"  style="margin-top: 3%;">
          <el-input v-model="form.PSN_NAME"></el-input>
        </el-form-item>



        <el-form-item label="医院名称" style="margin-top: 3%;">
<!--          <el-select placeholder="请选择医院名称" v-model="form.FIXMEDINS_NAME">-->
<!--&lt;!&ndash;            <el-option label="北京协和医院" value="北京协和医院"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-option label="四川大学华西医院" value="四川大学华西医院"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-option label="复旦大学附属中山医院" value="复旦大学附属中山医院"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-option label="上海交通大学医学院附属瑞金医院" value="上海交通大学医学院附属瑞金医院"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-option label="中山大学附属第一医院" value="中山大学附属第一医院"></el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-option label="华中科技大学同济学院附属同济医院" value="华中科技大学同济学院附属同济医院"></el-option>&ndash;&gt;-->

<!--          </el-select>-->
<!--            <el-radio v-model="form.FIXMEDINS_NAME" v-for="(item,index) in options "-->
<!--                      :key="this.index" :label="item">-->
<!--                {{item}}</el-radio>-->
<!--          <el-input v-show="!this.flagCheck" v-model="form.CEERTNO"></el-input>-->
<!--            <el-select v-model="form.FIXMEDINS_NAME" placeholder="请选择">-->


<!--                <el-option v-for="(option,index) in options" :key="index" :label="option.value" :value="option.value"></el-option>-->

<!--            </el-select>-->


            <el-select v-model="form.FIXMEDINS_NAME" placeholder="请选择医院名称">
                <el-option
                        v-for="(option,index) in options"
                        :key="index"
                :label="option.name"
                :value="option.name"
                ></el-option>
            </el-select>


        </el-form-item>




        <!--        <el-form-item label="入院时间"  style="margin-top: 3%;">-->
        <!--          <el-col :span="11">-->
        <!--            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>-->
        <!--          </el-col>-->
        <!--          <el-col class="line" :span="2">-</el-col>-->
        <!--          <el-col :span="11">-->
        <!--            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>-->
        <!--          </el-col>-->
        <el-form-item label="入院时间" style="margin-top: 3%;">
          <el-date-picker
                  v-model="value2"
                  type="datetime"
                  placeholder="选择日期时间"
                  align="right"
                  :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="onSubmit"  style="margin-top: 10%;">立即创建</el-button>
          <el-button @click="goHome">取消</el-button>
        </el-form-item>

      </el-form>
<!--      <div class="hospital-element"></div>-->
    </div>


  </div>
    </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>


  // import fa from "./js/element-ui/src/locale/lang/fa";

  var vm = new Vue({
    el: "#app",
    data: {
      activeIndex: '1',
      activeIndex2: '1',
      form: {
       PSN_NAME:'',
        CEERTNO:'',
        FIXMEDINS_NAME:'',
        date1:'',
        date2:''
      },
      flagCheck:false,
      options:[],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value2: '',
  },
    methods: {
      goHome(){
        window.location.href = './index.html'
      },

      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },

      datetoLost(dateString){
        var date = new Date(dateString);

// 获取年、月、日、小时和分钟
        var year = date.getFullYear();
        var month = ('0' + (date.getMonth() + 1)).slice(-2);
        var day = ('0' + date.getDate()).slice(-2);
        var hours = ('0' + date.getHours()).slice(-2);
        var minutes = ('0' + date.getMinutes()).slice(-2);

// 构建目标格式的日期字符串
        var formattedDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":01";
        return formattedDate;
      },
        checkIdNumber() {
        if (this.form.CEERTNO.length !== 18) {
          alert("身份证号必须为18位");
          // 或者使用更适合你的前端框架的提示方式
        }
      },
      onSubmit() {
        var currentTime = new Date();
        var url = '/api/insert';
// 创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
// 构建完整的URL，将参数附加在URL上
        var fullUrl = url + '?PSN_NAME=' + encodeURIComponent(this.form.PSN_NAME)
        +'&CEERTNO='+encodeURIComponent(this.form.CEERTNO)+'&FIXMEDINS_NAME='+encodeURIComponent(this.form.FIXMEDINS_NAME)+
                '&create_TIME='+encodeURIComponent(this.datetoLost(currentTime))+'&begin_DATE='+encodeURIComponent(this.datetoLost(this.value2));
// 设置请求方法和URL
        console.log(fullUrl)
        xhr.open('GET', fullUrl, true);
// 监听请求状态变化
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
              // 请求成功，处理返回的数据
              // console.log(xhr.responseText);
                    if (xhr.responseText==='true'){
                alert("该病人入院成功")
        window.location.assign("/index.html");
                }else {
                  alert('该用户还未出院，或者信息错误')
                }
                            } else {
                              // 请求发生错误，处理错误信息
              console.error('Request error:', xhr.status);
              alert('服务器错误')
            }
          }
        };
// 发送请求
        xhr.send();
      },
        stopMethodInterval() {
            // 停止定时调用方法
            clearInterval(this.methodInterval);
        },

//       getM(url) {
//         var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
//
// xhr.open('GET', url, true); // 配置请求方法和 URL，使用 GET 请求方式和异步方式
//
// xhr.onreadystatechange = function() {
//   if (xhr.readyState === 4) {
//     if (xhr.status === 200) {
//       var response = JSON.parse(xhr.responseText);
//       this.tableData = response; // 将获取到的后端数据赋值给 backendData 变量
//       console.log(response);
//
//
//     } else {
//       console.log('请求失败，状态码：' + xhr.status);
//     }
//   }
// };
//
// xhr.send(); // 发送请求
//
//       },
        startMethodInterval() {
            // 每5秒调用一次方法
            this.methodInterval = setInterval(() => {
                this.getM(); // 替换为你想要调用的方法
            }, 5000);
        },

        getM() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    this.options = response; // 将获取到的后端数据赋值给 backendData 变量
                    console.log(this.options)
                    xhr.responseText
                }
            }.bind(this);

            xhr.open('GET', '/api/getallHost', true); // 替换为实际的后端请求接口
            xhr.send();
        }
    },
      mounted() {
          this.getM();
          var intervalId = setInterval(getM, 5000);
      },
      created() {
          // 在Vue实例创建时开始定时调用方法
          this.getM();
          var intervalId = setInterval(getM, 5000);
      },
      beforeUnmount() {
          // 在组件卸载前停止定时调用方法
          this.stopMethodInterval();
      },
  })
</script>

</html>